<template>
  <div class="py-24 pr-24 bd-filt-6 bgc-lightgrey">
    <el-form-item label="位置尺寸" class="mb-24">
      <LayoutSetting v-model="model" />
    </el-form-item>
    <el-form-item label="不透明度" class="mb-24">
      <OpacitySetting v-model="style" />
    </el-form-item>
    <el-form-item label="线条颜色" class="mb-24">
      <div class="d-flex jc-between">
        <ColorSetting v-model="config.lineColor" />
        <div class="d-flex">
          <span class="mr-24">线条厚度</span>
          <div class="border-width-input">
            <el-input-number
              v-model="style.height"
              :step="1"
              step-strictly
              :min="0"
              :max="999"
              :controls="false"
            ></el-input-number>
            <div class="icon-count-control absCenterY pointer">
              <SvgIcon icon-class="collapse-arrow" class="arrow-top" @click="style.height += 1"></SvgIcon>
              <SvgIcon icon-class="collapse-arrow" class="arrow-bottom" @click="style.height -= 1"></SvgIcon>
            </div>
          </div>
        </div>
      </div>
    </el-form-item>
    <el-form-item label="线条类型">
      <el-select v-model="config.lineType">
        <el-option v-for="(item, i) in lineTypesList" :key="i" :label="item.label" :value="item" value-key="value">
          <div class="d-flex al-center fulled-h">
            <div
              class="line-bar flex-1"
              :style="{ backgroundImage: item.value, backgroundSize: `${item.width * 2}px 100%` }"
            ></div>
          </div>
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
  import LayoutSetting from '@/views/productEdit/components/settingComponent/LayoutSetting';
  import OpacitySetting from '@/views/productEdit/components/settingComponent/OpacitySetting';
  import ColorSetting from '@/views/productEdit/components/settingComponent/ColorSetting';
  const lineTypesList = [
    { label: '实线', width: 100, value: 'linear-gradient(90deg, #000,#000)' },
    { label: '长划线', width: 12, value: 'linear-gradient(90deg, #000 70%, transparent 70%)' },
    { label: '短划线', width: 7, value: 'linear-gradient(90deg, #000 60%, transparent 60%)' },
    { label: '圆点', width: 4, value: 'linear-gradient(90deg, #000 70%, transparent 70%)' },
    { label: '方点', width: 2, value: 'linear-gradient(90deg, #000 50%,transparent 50%)' },
    {
      label: '划线-点',
      width: 10,
      value: 'linear-gradient(90deg, #000 40%, transparent 40%,  transparent 65%,  #000 65%, #000 75%, transparent 75%)'
    },
    {
      label: '长划线-点-点',
      width: 20,
      value:
        'linear-gradient(90deg, #000 45%, transparent 45%, transparent 60%, #000 60%,  #000 65%, transparent 65%, transparent 80%, #000 80%, #000 85%, transparent 85%)'
    }
  ];
  export default {
    components: {
      LayoutSetting,
      OpacitySetting,
      ColorSetting
    },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      this.lineTypesList = lineTypesList;
      return {};
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      }
    }
  };
</script>
<style lang="scss" scoped>
  // 线条厚度配置
  .border-width-input ::v-deep {
    position: relative;

    .el-input-number,
    .el-input {
      width: 77px;
      line-height: 32px;

      .el-input__inner {
        padding-right: 32px;
      }
    }

    .icon-count-control {
      right: 16px;
      width: 14px;
      height: 28px;
      font-size: 12px;
      color: #cecece;

      .arrow-top,
      .arrow-bottom {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        &:hover {
          color: map-get($colors, 'theme');
          transition: 0.3s all;
        }
      }

      .arrow-top {
        top: 3px;
        transform: translateX(-50%) rotate(180deg);
      }

      .arrow-bottom {
        bottom: 3px;
      }
    }
  }

  .line-bar {
    height: 2px;
    background-repeat: repeat-x;
  }
</style>
